<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/static/common/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>应急故障手册</title>
    <%@include file="../../public/commonJs.jsp" %>
    <%@include file="../../public/commonCss.jsp" %>
    <%@include file="../../public/ueditor.jsp" %>
</head>
<body ms-controller="main" class="ms-controller">
<div id="wrapper">
    <div class="boxmain whiteBox lrbox">
        <div class="lrboxleft borderR" style="width:22%">
            <div class="from-header borderB ">
                <select id="trainType" onchange="selectChange(this)" style="display: inline-block">
                    <c:forEach items="${codeDatas}" var="codeData">
                        <option value="${codeData.itemValue}">${codeData.itemText}</option>
                    </c:forEach>
                </select>
                <span class="classifyEdit fr">
					<button class="layui-btn layui-btn-primary layui-btn-small" ms-on-click="move(1)">上移</button>
					<button class="layui-btn layui-btn-primary layui-btn-small" ms-on-click="move(2)">下移</button>
					<button class="layui-btn layui-btn-danger layui-btn-small" ms-on-click="deleteSelectNode()"
                            style="padding:0 10px">删除</button>
				</span>
            </div>
            <div class="from-body withheader contentbox8">
                <ul id="treeDemo" class="ztree" style="width:100%;overflow: auto;"></ul>
            </div>
        </div>
        <div class="lrboxmain borderL" style="margin-left:22%">
            <div class="from-header borderB contentbox">
                <div>
                    <span class="font14"> 所属分类:</span><a id="category"><span class="fontOrange2"> {{title}}</span></a>
                    <span class="fr">
                         <button class="layui-btn layui-btn-normal layui-btn-small" onClick="addBook()">新增</button>
                         <button class="layui-btn layui-btn-small" onClick="preView()">预览</button>
                        <button class="layui-btn layui-btn-small" onClick="saveForm()">保存</button>
                    </span>
                </div>
            </div>
            <div class="from-body withheader contentbox8 layui-form layui-form-pane" style=" overflow: auto;">
                <input type="hidden" name="id">
                <input type="hidden" name="parentId">
                <div class="layui-form-item">
                    <label class="layui-form-label">上级目录</label>
                    <div class="layui-input-block">
                        <input type="text" name="parentName" class="layui-input" placeholder="上级目录" style="width: 100%;"
                               readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" placeholder="输入标题" class="layui-input"
                               lay-verify="required"
                               style="width: 100%;">
                    </div>
                </div>
                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">目录或章节</label>
                    <div class="layui-input-block">
                        <input type="radio" name="isCatalog" value="0" title="目录" checked>
                        <input type="radio" name="isCatalog" value="1" title="章节">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text tt1">
                    <textarea id="container" name="container" style="width: 100%; height: 400px;"></textarea>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button id="save" class="layui-btn" lay-submit="" lay-filter="demo1" style="display: none">保存
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- whitebox -->
</div>
<script type="text/javascript">
    var vm;
    var zTreeObj;
    var ue;
    var form = layui.form();
    form.render();
    avalon.ready(function () {
        vm = avalon.define({
            $id: "main",
            treeData: [],//字典数据
            title: '应急手册',
            selectNode: {}
        })
        avalon.scan();
        loadTreeData($("#trainType").val());
        ue = UE.getEditor("container");
        keyBoardEvent.enter(function () {
            //键盘回车事件
            $('#save').click();
        })
    });
    function saveForm() {
        $('#save').click();
    }
    //当select值改变的时候触发
    function selectChange(_this) {
        var selectValue = $(_this).val();
        console.log(selectValue);
        loadTreeData(selectValue);
    }
    //新增目录或者内容
    function addBook() {
        var nodes = zTreeObj.getSelectedNodes();
        if (nodes.length == 0) {
            layui.layer.alert('你没有选择任何节点，请先选择节点', {closeBtn: 0});
            return;
        }
        setFormValue(nodes[0], 1);
    }
    //预览
    function preView() {
        var url = "${ctx}/webView/emergeShow";
        var dataStr = {
            createTime: getNowFormatDate(),
            name: $("input[name='name']").val(),
            contentHtml: ue.getContent()
        }
        layerUtil.preview(url, dataStr, "预览", ['450px', '90%']);
    }
    //设置表单的值
    function setFormValue(obj, type) {
        if (type == 1) {//表示新增
            $("input[name='id']").val('');
            $("input[name='name']").val('');
            $("input[name='parentId']").val(obj.id);
            $("input[name='parentName']").val(obj.name);
        } else {//表示查看
            $("input[name='id']").val(obj.id);
            $("input[name='name']").val(obj.name);
            $("input[name='parentId']").val(obj.parentId);
            $("input[name='parentName']").val(obj.parentName);
        }
        $("input[name='isCatalog'][value='" + obj.isCatalog + "']").attr("checked", true);
        ue.setContent(obj.contentHtml == null ? "" : obj.contentHtml);
        form.render();

    }
    //选中checkbox
    function setCheckBoxChecked(trainType) {
        trainType = trainType == null ? "" : trainType;
        $(".js_cb").each(function (index, element) {
            var value = $(this).val();
            if (trainType.indexOf(value) != -1) {
                element.checked = true;
            } else {
                element.checked = false;
            }
        });
    }
    //删除节点
    function deleteSelectNode() {
        var nodes = zTreeObj.getSelectedNodes();
        if (nodes.length == 0) {
            layerUtil.fail("你没有选择节点，请先选择节点");
            return;
        }
        if (nodes[0].id == '0') {
            layerUtil.fail("顶级目录不允许删除");
            return;
        }
        layui.layer.alert('你确定删除该节点吗，如果该节点包含子节点会将子节点一并删除,请慎重操作。', {
            btn: ['确定', '取消']
        }, function () {
            //执行删除的ajax
            var url = '${ctx}/emergeBook/deleteById.action?id=' + nodes[0].id;
            ajaxUtil.post(url, "", false, function () {
                layerUtil.success("删除成功");
                loadTreeData();
            });
        });
    }
    function getSelectNode() {
        var nodes = zTreeObj.getSelectedNodes();
        if (nodes.length == 0) {
            return null;
        }
        return nodes[0];
    }
    //加载菜单数据
    function loadTreeData(trainType) {
        var url = "${ctx}/emergeBook/selectAllBook.action";
        var dataStr = {
            trainType: trainType
        }
        ajaxUtil.post(url, dataStr, true, function (data) {
            vm.treeData = data.data;
            initZTree();
        });
    }
    //初始化树
    function initZTree() {
        var setting = {
            data: {
                simpleData: {enable: true, idKey: "id", pIdKey: "parentId", rootPId: 'root'}
            },
            callback: {onClick: nodeOnClick}
        };
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, vm.$model.treeData);
        var nodes = zTreeObj.getNodes();
        zTreeObj.expandNode(nodes[0], true, false, false);
    }

    //点击节点的回调
    function nodeOnClick(event, treeId, treeNode) {
        if (treeNode.parentId == 'root') {
            return;
        }
        setFormValue(treeNode, 2);
    }
    //上移or下移
    function move(type) {
        var nodes = zTreeObj.getSelectedNodes();
        if (nodes.length == 0 || nodes[0].id == '0') {
            layerUtil.fail('你没有选择节点，请先选择节点');
            return;
        }
        var node = nodes[0];
        var node2;
        var moveStr;
        if (type == 1) {
            node2 = node.getPreNode();
            moveStr = "prev";
        } else if (type == 2) {
            node2 = node.getNextNode();
            moveStr = "next";
        }
        if (node2 == null) {
            layerUtil.fail('该节点已经是第一个了');
            return;
        }
        var dataStr = {id1: node.id, id2: node2.id,};
        var url = "${ctx}/emergeBook/move.action";
        ajaxUtil.post(url, dataStr, true, function (data) {
            zTreeObj.moveNode(node2, node, moveStr);
        });
    }

    //监听提交
    form.on('submit(demo1)', function (data) {
        if (data.field.parentId == '') {
            layerUtil.fail("请先选择上级目录");
            return;
        }
        data.field["contentText"] = ue.getContentTxt();
        data.field["contentHtml"] = ue.getContent();
        data.field["trainType"] = $("#trainType").val();
        var url = "${ctx}/emergeBook/saveOrUpdate.action";
        ajaxUtil.post(url, data.field, true, function (data) {
            if (data.type == 'save') {
                $("input[name='id']").val(data.eb.id);
                zTreeObj.addNodes(getSelectNode(), data.eb);
            } else if (data.type == 'update') {
                var node = zTreeObj.getNodeByParam("id", data.eb.id, null);
                node.name = data.eb.name;
                node.contentHtml = data.eb.contentHtml;
                zTreeObj.updateNode(node);
            }
        });
        return false;
    });
</script>
</body>
</html>